<template>
  <div style="width: auto; height: 225px" id="echarts2"></div>
</template>

<script>
import echarts from "echarts";
import { getStatisticalData } from "@/api";

export default {
  name: "echarts2",
  data() {
    return {
      // option配置
      option: {
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.echartsInit();
    this.getData();
  },
  methods: {
    echartsInit() {
      // 在生命周期中挂载
      echarts.init(document.getElementById("echarts2")).setOption(this.option);
    },
    async getData() {
      const res = await getStatisticalData();
      if (res.data.status === 200) {
        let arr = [
          { name: "确认下单", value: res.data.data.ToBeIssued },
          { name: "派送完成", value: res.data.data.Complete },
          { name: "订单异常", value: res.data.data.Error },
        ];
        this.option.series[0].data = arr;
      }
    },
  },
  //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
  watch: {
    //观察option的变化
    option: {
      handler(newVal, oldVal) {
        console.log(newVal);
        if (newVal) {
          this.echartsInit();
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },
};
</script>

<style scoped></style>
